import React, { Component, PropTypes } from 'react';
import {
  View,
  Text,
  Image,
  Platform,
  StyleSheet,
} from 'react-native';
import { TabNavigator } from 'react-navigation';

import PxToDp from '../../utils/PxToDp';
import NavCon from '../Public/NavCon';

import MonthRank from '../../containers/MonthRankContainer';
import QuarterRank from '../../containers/QuarterRankContainer';
import YearRank from '../../containers/YearRankContainer';
import fetchPerfence from '../../actions/PerfenceAction';

const perfenceIsLoading = true;
let rank = 0; // 当月

const Routes = {
  当月排名: { screen: MonthRank },
  当季排名: { screen: QuarterRank },
  年度排名: { screen: YearRank },
};
const TabConfig = {
  stateName: 'RankNavigation',
  tabBarPosition: 'top',
  animationEnabled: false,
  swipeEnabled: true,
  navbarnoborder: false,
  lazy: true, // 是否懒加载
  tabBarOptions: {
    activeTintColor: '#fff', // 当前活动tab字体颜色
    inactiveTintColor: '#f9bebe', // 默认字体颜色
    indicatorStyle: {  // 边框设置
      borderBottomColor: '#FFFFFF',
      borderBottomWidth: 2,
    },
    labelStyle: {
      fontSize: 14,
    },
    style: {
      height: 46,
      paddingBottom: Platform.OS === 'ios' ? 12 : 0,
      backgroundColor: '#f65252',
    },
  },
};
const RankNavigation = TabNavigator(Routes, TabConfig);

export default class SaleRank extends Component {
  static propTypes = {
    dispatch: PropTypes.func,
  };

  render() {
    const perfenceData = this.props.perfenceData;
    let ranking = '';
    let total = '';
    let name = '';
    if (perfenceData) {
      ranking = perfenceData.myseq;
      total = perfenceData.total_answers;
      if (perfenceData.cur_user) {
        name = perfenceData.cur_user.username;
      }
    }
    return (
      <View style={[styles.flex, styles.bgColor, styles.titleTop]}>
        <NavCon bgColor="#fff" currentTitle="销量排名" onPress={() => this.props.navigator.pop()} />
        <View style={styles.myRank}>
          <View style={[styles.row, styles.myWrapper]}>
            <View>
              <Image style={[styles.avatar]} source={require('../../img/logobj.png')} />
              <Text style={[styles.name]}>{name}</Text>
            </View>
            <View style={[styles.innerWrapper]}>
              <Text style={[styles.rank]}>{total}</Text>
              <Text style={[styles.rankTitle]}>接待总人数</Text>
            </View>
            <View style={[styles.line]} />
            <View style={[styles.innerWrapper, { marginLeft: PxToDp(15) }]}>
              <Text style={[styles.rank]}>{ranking}</Text>
              <Text style={[styles.rankTitle]}>当月销售排名</Text>
            </View>
          </View>
        </View>
        <View style={[styles.flex, styles.switch]}>
          <RankNavigation
            screenProps={this.props}
            onNavigationStateChange={(lastState, newState) => {
              console.log('rank=', rank);
              console.log('lastState=', lastState);
              rank = newState.index;
              const { dispatch } = this.props;
              dispatch(fetchPerfence(perfenceIsLoading, rank, '', '', '', 1));
            }}
          />
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  bgColor: {
    backgroundColor: '#f7f8fa',
  },
  myRank: {
    width: '100%',
    height: PxToDp(106),
    backgroundColor: '#fff',
  },
  myWrapper: {
    paddingLeft: PxToDp(20),
  },
  avatar: {
    width: PxToDp(74),
    height: PxToDp(74),
    borderRadius: PxToDp(37),
  },
  name: {
    marginTop: PxToDp(6),
    width: PxToDp(74),
    alignItems: 'center',
    textAlign: 'center',
    color: '#999',
    fontSize: PxToDp(11),
  },
  innerWrapper: {
    width: PxToDp(96),
    marginLeft: PxToDp(40),
    paddingTop: PxToDp(32),
  },
  rank: {
    width: '100%',
    textAlign: 'center',
    color: '#333',
    fontSize: PxToDp(20),
  },
  rankTitle: {
    width: '100%',
    textAlign: 'center',
    color: '#999',
    fontSize: PxToDp(12),
  },
  line: {
    marginLeft: PxToDp(15),
    marginTop: PxToDp(42),
    width: 0,
    height: PxToDp(24),
    borderRightWidth: PxToDp(1),
    borderColor: '#ddd',
  },
  switch: {
    width: PxToDp(355),
  },
  titleTop: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
});
